<template>
  <div class="uploadProduct">
    <div class="center">
      <div class="modityImg">
        <div class="master">
          <img v-if="indexSelf < 11" :src="masterMap" alt="主图">
          <video v-else :src="videos" controls />
        </div>
        <ul :class="{'masterBom': true, 'lastLi1': animast}">
          <div class="firstLi" @click="animast = false">
            <img src="@/assets/img/disabled-prev.png" alt="">
          </div>
          <li v-if="videos">
            <video
              :src="videos"
              controls
              :class="{'active': indexSelf === 11}"
              @mouseover="masterHover(videos, 11)"
            />
          </li>
          <li
            v-for="(item, index) in imgArr"
            :key="item"
            :class="{'active': indexSelf === index}"
            @mouseover="masterHover(item, index)"
          >
            <img v-if="item" :src="item">
          </li>
          <div class="lastLi" @click="animast = true">
            <img src="@/assets/img/disabled-next.png" alt="">
          </div>
        </ul>
      </div>
      <ul class="details">
        <li>{{ basicValue.fdescripTion }}</li>
        <li><!--价格-->{{ $t('shop.price') }}: <span>￥{{ basicValue.fprice }}</span></li>
        <li><!--编码-->{{ $t('shop.fnumber') }}: {{ basicValue.fnumber }}</li>
        <li><!--名称-->{{ $t('shop.name1') }}: {{ basicValue.fname }}</li>
        <li><!--型号-->{{ $t('shop.model') }}: {{ basicValue.fmodel }}</li>
        <li><!--规格-->{{ $t('shop.specifica') }}: {{ basicValue.fspecificaTion }}</li>
        <li><!--类型-->{{ $t('shop.type') }}: {{ basicValue.ferpcls }}</li>
        <li><!--单位-->{{ $t('shop.unit') }}: {{ basicValue.fbaseUnitName }}</li>
        <li>
          <el-input-number v-model="proNumber" :min="0" size="mini" />
          <el-button type="danger" @click="shoppingTrolley(basicValue)"><!--加入购物车-->{{ $t('shop.addShopCart') }}</el-button>
          <!--<el-button size="mini" type="" @click="closeAccount">立即结算</el-button>-->
        </li>
      </ul>
    </div>
    <div class="centerBom">
      <div class="centerBomText"><!--商品详情-->{{ $t('shop.proDetail') }}</div>
      <ul>
        <li
          v-for="item in fimgdeta"
          :key="item"
        >
          <img v-if="item" :src="item">
        </li>
      </ul>
    </div>
    <div class="fixRight">
      <div @click="pushView">
        <i class="el-icon-shopping-cart-2" />
        <br>
        <span><!--购物车-->{{ $t('shop.shopCart') }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { createSalApply, insertShopping, queryMaretMaterial } from '@/api/marketManage/saleReport'
import Bus from '@/utils/bus'

export default {
  data() {
    return {
      basicValue: {},
      proNumber: 1,
      indexSelf: 11,
      masterMap: '',
      imgArr: [],
      fimgdeta: [],
      videos: '',
      animast: false
    }
  },
  created() {
    this.handleForm()
  },
  methods: {
    // 加入购物车
    shoppingTrolley(ev) {
      const DATA = {
        fqty: this.proNumber,
        fprice: ev.fprice,
        fmaterialId: ev.fmaterialId
      }
      insertShopping(DATA).then(res => {
        if (res.code === 0) {
          // 触发购物车接口
          Bus.$emit('shopcart', 1)
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 结算-生成申请单
    closeAccount() {
      const DATA = {
        saleDetails: [{ fqty: this.proNumber, fmaterialId: this.basicValue.fmaterialId }]
      }
      createSalApply(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        }
      })
    },
    // 跳转购物车
    pushView() {
      this.$router.push({ path: '/shopCart' })
    },
    // 点击小图
    masterHover(item, ev) {
      if (ev === 11) {
        this.videos = item
        this.indexSelf = 11
      } else {
        this.indexSelf = ev
        this.masterMap = item
      }
    },
    // 获取表单
    async handleForm(ev) {
      const fnumber = this.$route.params.id || ev
      if (!fnumber) {
        return
      }
      const { data: RES } = await queryMaretMaterial({
        fnumber: fnumber
      })
      const {
        fmodel,
        fprice,
        fbaseUnitName,
        ferpcls,
        fremarks,
        fspecificaTion,
        fname,
        fdescripTion,
        fmaterialId,
        fimg,
        fworkImg,
        fworkImg1,
        fworkImg2,
        fworkImg3,
        fmarket,
        videos,
        fimgdetails,
        fimgdetails1,
        fimgdetails2,
        fimgdetails3,
        fimgdetails4
      } = RES
      this.videos = videos
      this.indexSelf = this.videos ? 11 : 0
      this.basicValue = {
        fprice,
        fmaterialId,
        fmodel,
        fnumber,
        fspecificaTion,
        fbaseUnitName,
        ferpcls,
        fremarks,
        fname,
        fdescripTion
      }
      fmarket instanceof Array ? this.checkedCommity = fmarket : this.checkedCommity = []
      this.imgArr = [
        fimg,
        fworkImg,
        fworkImg1,
        fworkImg2,
        fworkImg3
      ]
      this.fimgdeta = [
        fimgdetails,
        fimgdetails1,
        fimgdetails2,
        fimgdetails3,
        fimgdetails4
      ]
      this.masterMap = fimg
    }
  }
}
</script>

<style scoped lang="scss">
.uploadProduct {
  padding: 10px;
  background: #FFFFFF;
  min-height: calc(100vh - 100px);
  .center {
    width: 1000px;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 20px;
    .modityImg {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 350px;
      position: relative;
      .master {
        width: 350px;
        height: 350px;
        border: 1px solid #eee;
        margin-bottom: 20px;
        text-align: center;
        img, video {
          width: 100%;
          height: auto;
          max-height: 350px;
        }
      }
      .masterBom {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        list-style: none;
        padding: 5px 35px;
        margin: 0;
        //background: #eee;
        overflow: hidden;
        position: relative;
        li {
          width: 58px;
          height: 58px;
          margin: 0 5px;
          border: 2px solid transparent;
          img, video {
            width: 54px;
            height: 54px;
          }
        }
        .active {
          border: 2px solid #e53e41;
        }
      }
    }
    .firstLi, .lastLi {
      width: 30px;
      position: absolute;
      top: 0;
      bottom: 0;
      line-height: 85px;
      background: #FFF;
      text-align: center;
      img {
        width: 22px!important;
        height: 32px!important;
      }
    }
    .firstLi:hover, .lastLi:hover {
      cursor: pointer;
    }
    .firstLi {
      left: 0;
    }
    .lastLi {
      right: 0;
    }
    .lastLi1 {
      justify-content: flex-end!important;
    }
    .details {
      width: 100%;
      margin-left: 20px;
      list-style: none;
      position: relative;
      li {
        color: #333;
        font-weight: 500;
        margin-bottom: 5px;
      }
      li:first-child {
        color: #666;
        padding-top: 10px;
        line-height: 28px;
        font-weight: 700;
      }
      li:last-child {
        position: absolute;
        bottom: 10px;
        .el-button {
          margin-left: 10px;
        }
      }
      li:nth-child(2) {
        background: #F3F3F3;
        color: #666;
        padding: 5px;
        span {
          color: #e4393c;
          font-size: 22px;
        }
      }
    }
  }
  .centerBom {
    width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    .centerBomText {
      padding-bottom: 10px;
    }
    ul {
      align-self: center;
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        img {
          //width: 100%;
          height: auto;
        }
      }
    }
  }
  .fixRight {
    position: fixed;
    right: 10px;
    top: 20%;
    div {
      width: 60px;
      max-height: 60px;
      background: rgba(0,0,0,.5);
      text-align: center;
      padding: 10px 0;
      color: #FFF;
      border-radius: 2px;
      transition: all 300ms;
      cursor: pointer;
      margin-bottom: 2px;
      //font-size: 12px;
      font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
      i {
        font-size: 24px;
      }
    }
    div:hover {
      background: #E2331A;
      color: #FFF;
    }
  }
}
</style>
